<template>
  <div id="nav-logo">
    <img src="~assets/img/home/top_logo_icon.png" class="navbar-logo-img" />
    <div class="navbar-logo-title">
      <h1>安防运维管理平台</h1>
      <h2>Security Operation and Maintenance Management</h2>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NavBarLogo'
  }
</script>
<style>
  #nav-logo {
    background-image: url('~assets/img/home/top_logo_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 500px;
    display: flex;
  }

  #nav-logo img {
    object-fit: contain;
    margin-left: 5px;
  }

  .navbar-logo-title {
    width: 360px;
    font-family: "MicrosoftYaHei";
    height: 100%;
    color: #ffffff;
  }

  .navbar-logo-title>h1 {
    margin: 10px 5px 0 5px;
    font-size: 18px;
  }

  .navbar-logo-title>h2 {
    margin: 0 5px 0 5px;
    font-size: 7px;
  }
</style>
